<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>歌单创建</title>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style type="text/css">
        body{
            /*background-image: url(../static/img/musicListCreatBg.jpeg);*/
        }
        .boxDom{
            height: 100%;
            margin-top: 200px;
        }
        .from{
            margin-top: 20px;
            width: 400px;
            margin-left: -20%;
            opacity: 0.7;
            border-radius: 10px;
            height: 50px;
        }
        input{
            height: 80px;
            width: 200px;
        }
        textarea{
            height: 150px;
            border-radius: 50px;
            width: 100px;
        }
        .btn{
            margin-left: 40px;
            margin-top: 20px;
            border-radius: 18px;
        }
        .music-list{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="boxDom" id="boxDom">
                <div class="touxiang">
                    <img th:src="${user.getUser_headurl()}"  style="width: 100px;height: 100px;border-radius: 50px;margin-left: 60px" class="img-circle txborder">
                </div>
                <div style="margin: 5px" th:if="${list} != 0" >
                        <input type="text" id="listName" class="form-control from" value="8888" th:value="${list.list_name}">
                        <input type="text" id="listHearUrl" class="form-control from" th:value="${list.list_photourl}">
                        <select type="text" id="listType" class="form-control from">
                            <option th:text="${list.list_type}">选择歌单种类</option>
                            <option>华语</option>
                            <option>欧美</option>
                            <option>网络歌曲</option>
                            <option>流行</option>
                            <option>粤语</option>
                            <option>忧伤</option>
                            <option>治愈</option>
                            <option>乐观</option>
                            <option>希望</option>
                        </select>
                        <textarea class="form-control from" id="exampleFormControlTextarea1" rows="3" th:text="${list.list_note}"></textarea>
                        <button class="btn btn-outline-warning bi bi-hand-index-fill" th:onclick="editList([[${list_id}]])">提交</button>
                </div>
                <div style="margin: 5px" th:if="${list} == 0">
                    <input type="text" id="listName" class="form-control from" placeholder="输入创建的歌单名">
                    <input type="text" id="listHearUrl" class="form-control from" placeholder="输入歌单的封面链接">
                    <select type="text" id="listType" class="form-control from">
                        <option>选择歌单种类</option>
                        <option>华语</option>
                        <option>欧美</option>
                        <option>网络歌曲</option>
                        <option>流行</option>
                        <option>粤语</option>
                    </select>
                    <textarea class="form-control from" placeholder="歌单说明" id="exampleFormControlTextarea1" rows="3"></textarea>
                    <button class="btn btn-outline-warning bi bi-hand-index-fill" onclick="creatList()">提交</button>
                </div>
            </div>
        </div>
        <div class="col-8 music-list">
            <div style="text-align: center">
                <button class="btn btn-primary" th:each="type:${type}" th:text="${type}" th:onclick="getMusinBytype([[${type}]])">全部</button>
            </div>
            <div>
                <span><input class="form-check-input me-1" id="selectall" type="checkbox">全选/撤销：</span>
                <div id="TypeMusic">
                    <ul class="list-group" id="contentBody">
                        <li class="list-group-item" th:each="m:${music.getList()}">
                            <input class="form-check-input me-1" type="checkbox" name="music" th:value="${m.music_id}" aria-label="..." th:text="${m.music_name}">
                            <span style="float: right" th:text="${m.music_author}">歌手</span>
                        </li>
                        </li>
                    </ul>
                </div>
                <nav id="page" aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a th:href="'/musiclistCreat/?pageNum='+${music.pageNum-1}" th:unless="${music.isFirstPage}" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <th:block th:each="i :${#numbers.sequence(1, music.pages)}">
                            <li><a th:href="'/musiclistCreat/?pageNum='+${i}"  th:text="${i}">1</a></li>
                        </th:block>

                        <li>
                            <a th:href="'/musiclistCreat/?pageNum='+${music.pageNum-1}" th:unless="${music.isLastPage}" aria-label="Next">
                            <span aria-hidden="true">下一页
                            </span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

</div>
</body>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script>
    var music_id = [];
    checked();
    function checked() {
        var selectall = document.getElementById("selectall");
        var obj = document.getElementsByName('music');
        var sign = 1;//标志，用于判断是否选中了所有的音乐
        //全选和撤销
        selectall.onchange = function () {
            if (selectall.checked){
                for (var i=0;i<obj.length;i++){
                    obj[i].checked=true;
                    music_id.push(obj[i].value);
                }
            } else {
                for (var j=0;j<obj.length;j++) {
                    obj[j].checked=false;
                }
            }
        };
    }
    //创建歌单
    function creatList() {
        var obj1 = document.getElementsByName('music');
        //因为数组是全局变量所以要先清除，避免多余数据
        music_id.pop();
        //单个点击复选框
        for (var k in obj1){
            if (obj1[k].checked){
                music_id.push(obj1[k].value);
            }
        }
        var listName = $('#listName').val();
        var listHearUrl = $('#listHearUrl').val();
        var listType = $('#listType').val();
        var listNote = $('#exampleFormControlTextarea1').val();
        if (listName == undefined || listName == "") {
            alert("请输入歌单名")
        }else if (listHearUrl == undefined || listHearUrl == ""){
            alert("请输入歌单封面链接")
        } else if (listType == undefined || listType == ""){
            alert("请选择歌单类型")
        }else if (listNote == undefined || listNote == ""){
            alert("请输入歌单描述")
        }else if (music_id.length==0){
            alert("请至少选择一首歌曲")
        }else {
            var musicMusicLisits = [];
            for (var f=0;f<music_id.length;f++){
                var musicObj={
                    "music_id":music_id[f],
                    "list_name":listName,
                    "list_photourl":listHearUrl,
                    "list_type":listType,
                    "list_note":listNote
                };
                musicMusicLisits.push(musicObj)
            }
            console.log(musicMusicLisits)
            $.ajax({
                type:"post",
                url:BaseURL+"creatMusicList",
                contentType:"application/json",
                data:JSON.stringify(musicMusicLisits),
                traditional: true,//必须指定为true
                success:function (data) {
                    console.log(data)
                    window.location.href = BaseURL+"mypage";
                }
            })
        }

    }

    //创建歌单
    function editList(listId) {
        var obj1 = document.getElementsByName('music');
        //因为数组是全局变量所以要先清除，避免多余数据
        music_id.pop();
        //单个点击复选框
        for (var k in obj1){
            if (obj1[k].checked){
                music_id.push(obj1[k].value);
            }
        }
        var listName = $('#listName').val();
        var listHearUrl = $('#listHearUrl').val();
        var listType = $('#listType').val();
        var listNote = $('#exampleFormControlTextarea1').val();
        if (listName == undefined || listName == "") {
            alert("请输入歌单名")
        }else if (listHearUrl == undefined || listHearUrl == ""){
            alert("请输入歌单封面链接")
        } else if (listType == undefined || listType == ""){
            alert("请选择歌单类型")
        }else if (listNote == undefined || listNote == ""){
            alert("请输入歌单描述")
        }else if (music_id.length==0){
            alert("请至少选择一首歌曲")
        }else {
            var musicMusicLisits = [];
            for (var f=0;f<music_id.length;f++){
                var musicObj={
                    "music_id":music_id[f],
                    "list_id":listId,
                    "list_name":listName,
                    "list_photourl":listHearUrl,
                    "list_type":listType,
                    "list_note":listNote
                };
                musicMusicLisits.push(musicObj)
            }
            console.log(musicMusicLisits)
            $.ajax({
                type:"post",
                url:BaseURL+"editMusicList",
                contentType:"application/json",
                data:JSON.stringify(musicMusicLisits),
                traditional: true,//必须指定为true
                success:function (data) {
                    console.log(data)
                    window.location.href = BaseURL+"mypage";
                }
            })
        }

    }

    function getMusinBytype(type) {
        var music = {
            "music_type":type
        };
        $.ajax({
            type:"get",
            url:BaseURL+"music/getMyMusicBytype/?type="+type,
            dataType:"json",
            success:function (data) {
                console.log(data);
                var MusinList = data.data.list;
                var MusicPage = data.data;
                $('#contentBody').remove();
                $('#page').remove();
                // var div = '<div id="contentBody"></div>';
                // $('#TypeMusic').append(div);
                var contentHtml = '<ul class="list-group" id="contentBody">\n' +
                                    '</ul>\n';
                $('#TypeMusic').append(contentHtml);
                for (var i=0;i<MusinList.length;i++){
                    var li = $('<li class="list-group-item">\n' +
                                '    <input class="form-check-input me-1" type="checkbox" name="music" value="'+MusinList[i]["music_id"]+'" aria-label="...">'+MusinList[i]["music_name"]+'\n' +
                                '    <span style="margin-left: 150px">'+MusinList[i]["music_author"]+'</span>\n' +
                                '</li>');
                    $('#contentBody').append(li);
                }
            }
        });
        checked();
    }
</script>
</html>